import React from 'react';
import { connect } from 'dva';
import { message, Spin, Button } from 'antd';
import TableCop from '../../components/TableCop';
class Liabilities extends React.Component {
  init() {
    this.props.dispatch({
      type: 'check/getSuppliers',
      payload: {
        success: () => {
          message.success('供应商对账数据获取成功！');
          this.setState({ loading: false });
        },
        failed: () => {
          message.error('供应商对账数据获取失败！');
          this.setState({ loading: true });
        },
      }
    });
  }
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
    this.init();
  }
  render() {
    const { check: { liabilities_GRN, liabilities_suppliers } } = this.props;
    const c_columns = [
      {
        title: '单据编号',
        dataIndex: 'commodity_code',
      }, {
        title: '下单日期',
        dataIndex: 'purchase_date',
      }, {
        title: '供应商名称',
        dataIndex: 'supplier_name',
      }, {
        title: '应付金额',
        dataIndex: 'amount_payable',
      }, {
        title: '已付金额',
        dataIndex: 'amount_paid',
      }, {
        title: '负债金额',
        dataIndex: 'amount_debt',
      }, {
        title: '操作',
        render: (record) => <div>
          <Button>清单{record.product_id}</Button>
        </div>
      }
    ];
    const z_columns = [
      {
        title: '供应商名称',
        dataIndex: 'supplier_name',
      }, {
        title: '应付金额',
        dataIndex: 'amount_payable',
      }, {
        title: '已付金额',
        dataIndex: 'amount_paid',
      }, {
        title: '负债金额',
        dataIndex: 'amount_debt',
      }, {
        title: '操作',
        render: (record) => <div>
          <Button>清帐{record.product_id}</Button>
        </div>
      }
    ];
    return (
      <div>
        {
          this.state.loading ?
            <Spin size="large" tip="loading ..." />
            :
            <div>
              <p style={{ textAlign: 'center' }}>负债入库单列表</p>
              <TableCop rowKey="commodity_code" columns={c_columns} dataSource={liabilities_GRN ? liabilities_GRN : []} />
              <p style={{ textAlign: 'center' }}>负债供应商列表</p>
              <TableCop rowKey="supplier_name" columns={z_columns} dataSource={liabilities_suppliers ? liabilities_suppliers : []} />
            </div>
        }
      </div>
    );
  }
}

export default connect(({ check }) => ({ check }))(Liabilities);